<template>
	<view class="my-container">
		<!-- 自定义头部 -->
    <view class=" _w-max _top _left _z-index-2 _pos-fixed _top _left"  :style="{ 'background-color': 'rgba(255, 255, 255,' + srollOpacity + ')' }">
      <view :style="{ width: '100%', height: recHeight }"></view>
      <view class="felx_c h_96 f_s_18"  :style="{ color: 'rgb(' + srollColor + ','  + srollColor + ',' + srollColor +')'}"></view>
    </view>
		<view class="index">
			<view class="user-info _pad-x-15 _flex-row-bet-mid">
        <view class="user-info-left">
            <view class="avatar">
              <image class="_w-max _h-max" :src="isLogin ? userInfo.avatar : 'https://taxi.raxan.xyz/wechat/static/images/my/default_avatar.png'" mode="widthFix" v-if="true"></image>
            </view>
            <view class="username">
               <view class="txt">{{ isLogin ? userInfo.nickname : '登录/注册'}}</view>
              <view class="desc-txt" v-if="!isLogin">请先登录，体验更多功能！</view>
              <view class="label-box" v-if="isLogin">
                <view class="vip-txt">普通会员</view>
                <view class="label" @click="go_fillInfo">
                  <image class="_w-max _h-max" mode="widthFix" src="https://taxi.raxan.xyz/wechat/static/images/my/setting.png"></image>
                  {{ userInfo.car_contact.value ? userInfo.car_contact.value : '' }}
                </view>
              </view>
            </view>
        </view>
        <image class="setting-img" src="https://taxi.raxan.xyz/wechat/static/images/setting.png" mode="widthFix" @tap="goSetting"></image>
			</view>
      <view class="vip-rights-box" @tap="handleVipRights">
        <image class="vip-rights-img" src="https://taxi.raxan.xyz/wechat/static/images/my/vip_rights.png" mode="widthFix"></image>
      </view>
     
			<view style="background-color: #FFFFFF;margin: 0rpx 30rpx 0 30rpx;padding-top: 30rpx;padding-bottom: 30rpx;border-radius: 20rpx;">     
         <view class="card-title">我的钱包</view>
         <view style="display: flex;">
           <navigator url="/pages/users/balance/index" open-type="navigate" hover-class="none" style="flex: 1;text-align: center;">
            <view class="_mar-bottom-10" style="font-size: 30rpx;font-weight: 600;">{{ userInfo.now_money||'0.00' }}</view>
            <view style="color: #999;font-size: 26rpx;">余额</view>
           </navigator>   
           <navigator url="/pages/users/user_coupon/index" open-type="navigate" hover-class="none" style="flex: 1;text-align: center;">
            <view class="_mar-bottom-10" style="font-size: 30rpx;font-weight: 600;">{{ userInfo.couponCount||0 }}</view>
            <view style="color: #999;font-size: 26rpx;">优惠劵</view>
           </navigator>
           <navigator url="/pages/users/sign_in_integral/index" open-type="navigate" hover-class="none" style="flex: 1;text-align: center;">
            <view class="_mar-bottom-10" style="font-size: 30rpx;font-weight: 600;">{{ userInfo.integral||0 }}</view>
            <view style="color: #999;font-size: 26rpx;">积分</view>
           </navigator>
       </view>
			</view>
      <view class="my-service-box">
          <view class="title">我的服务</view>
          <view class="list">
              <view class="item" v-for="(item, index) in serviceData" :key="index" @tap="handleService(item)">
                <button open-type='contact' class="contact-btn" hover-class="none" v-if="item.id == 1">
                	<image :src="item.image" mode="" />
                	<text>{{item.name}}</text>
                </button>
                <template v-else>
                  <image :src="item.image" mode="" />
                  <text>{{item.name}}</text>
                </template>
              </view>
          </view>
      </view>
		</view>
		<!-- 完善信息遮罩层 -->
		<chooseAvatar :userInfo="userInfo" :show="edit_user_info" @saveOver="saveOver"></chooseAvatar>
	</view>
</template>

<script>
	import { getUserInfo } from '@/api/user.js';
	import { mapGetters } from 'vuex';
	import { toLogin, checkLogin } from '@/libs/login.js';
	import chooseAvatar from '@/components/chooseAvatar.vue';
  
	export default {
		components: {
			chooseAvatar
		},
		data() {
			return {
				recHeight: 0,//状态栏高度
        srollOpacity: 0,
        srollColor: 255,
				userInfo:{},// 用户信息
				edit_user_info: false,
        serviceData: [
          // {
          //   id: 1,
          //   name: '客服',
          //   image: 'https://taxi.raxan.xyz/wechat/static/images/my_service2.png'
          // },
          {
            id: 2,
            name: '开票管理',
            image: 'https://taxi.raxan.xyz/wechat/static/images/my_service3.png',
            path: '/pages/users/invoice/manage'
          },
          {
            id: 3,
            name: '帮助反馈',
            image: 'https://taxi.raxan.xyz/wechat/static/images/my_service5.png',
            path: '/pages/users/help_feedback/index'
          },
          {
            id: 4,
            name: '我的车辆管理',
            image: 'https://taxi.raxan.xyz/wechat/static/images/my_service7.png',
            path: '/pages/myCar/index',
          },
          {
            id: 5,
            name: '退押金',
            image: 'https://taxi.raxan.xyz/wechat/static/images/my_service4.png',
            path: '/pages/car_index/order_list',
            tab: 1
          }
        ]
			}
		},
		computed: mapGetters(['isLogin']),
    onPageScroll(e) {
      this.srollColor = e.scrollTop < 100 ? 255 - Math.floor(e.scrollTop * 2.55) : 0;
      this.srollOpacity = e.scrollTop < 100 && e.scrollTop >= 20 ? '0.' + Math.floor(e.scrollTop) : e.scrollTop < 20 && e.scrollTop >= 0 ? '0.0' + Math.floor(e.scrollTop) : e.scrollTop;
    },
		onLoad() {
        this.getPhoneInfo();
      
      // #ifdef MP
       this.serviceData.unshift({
         id: 1,
         name: '客服',
         image: 'https://taxi.raxan.xyz/wechat/static/images/my_service2.png'
       })
       // #endif
		},
		onShow() {
			let that = this;
			if(this.isLogin){
				this.getUserInfo();
			}else{
				toLogin()
			}
		},
		methods: {
      handleVipRights(){
        uni.navigateTo({
          url:  `/pages/annex/vip_center/index`
        })
      },
      handleService(item){
        if(item.id == 1){
          // 客服
          return;
        }
        if(item.tab == 1){
          if(item.path){
            uni.switchTab({
              url: item.path
            })
          }
        }else{
          if(item.path){
            uni.navigateTo({
              url: item.path
            })
          }
        } 
      },
      goSetting(){
        // 我的账户
        uni.navigateTo({
          // url: '/pages/users/user_money/index'
          url: `/pages/info_setting/my_account` 
        })
      },
      // 获取顶部高度信息
      getPhoneInfo() {
        uni.getSystemInfo({
          success: (res) => {
            this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
          }
        });
      },
			// 获取用户信息
			getUserInfo() {
				let that = this;
				getUserInfo().then((res)=>{
					if (res.data.nickname == '微信用户' || res.data.phone == '') {
						that.edit_user_info = true;
					} else {
						that.edit_user_info = false;
					}
					that.userInfo = res.data;
				}).catch((err)=>{
					uni.showToast({
						title:'用户信息获取失败',
						icon:'none'
					})
				})
			},
			//跳转信息认证
			go_fillInfo() {
				uni.navigateTo({
					url:'/pages/car_sub/auth/fill_info?contact_id='+this.userInfo.car_contact.contact_id
				})
			},
			saveOver() {
				this.edit_user_info = false;
				this.getUserInfo();
			},
		}
	}
</script>

<style scoped lang="scss">
// page{
//   background: #F5F6FD;
// }
.h_96 { height: 96rpx; }
.c_fff { color: #FFFFFF; }
.f_s_18 { font-size: 36rpx; }

.felx_c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-container{
  position: relative;
  min-height: 100vh;
  background: url("") #F5F6FD no-repeat;
background-size: 750rpx 800rpx;
// background-size: 750rpx auto;
}
.header_nav {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
		//顶部导航栏
	.status_bar {
		width: 100%;
		position: fixed;
		z-index: 9;
	}
	.header_title {
		width: 100%; 
		position: relative;
		z-index: 999;
	}
	.img {
		position: absolute;
		top: 0;
		z-index: 10;
	}
}
.index {
	// position: absolute;
  padding-top: 250rpx;
	width: 100%;
	.user-info {
		width: 100%;
		// height: 136rpx;
    display: flex;
    align-items: center;
    .user-info-left{
      display: flex;
      align-items: center;
      flex: 1;
    }
    .setting-img{
      width: 48rpx;
      height: 48rpx;
    }
		.username {
			display: flex;
			flex-direction: column;
			font-size: 40rpx;
			min-width: 500rpx;
			height: 100%;
			position: relative;
      // margin-top: 50rpx;
			.txt {
				width: 450rpx;
				// position: absolute;
				// top: 0;
				overflow:hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
        margin-bottom: 7rpx;
				&::before {
					content: 'Hi~，';
				}
			}
      .desc-txt{
        margin-top: 6rpx;
        font-size: 24rpx;
        color: #777B82;
      }
      .label-box{
        display: flex;
        align-items: center;
        .vip-txt{
          margin-right: 26rpx;
          padding: 8rpx 12rpx;
          background: #D9E1FF;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          font-size: 24rpx;
          color: #008DFF;
        }
      }
			.label {
				// position: absolute;
				// bottom: 0;
				width: 160rpx;
			  padding: 8rpx 12rpx;
			  border-radius: 8rpx 8rpx 8rpx 8rpx;
				background-color: rgba(255, 255, 255, 1);
				display: flex;
				justify-content: center;
				align-items: center;
        background: #D9E1FF;
        font-size: 24rpx;
        color: #111E36;
				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 6rpx;
				}
			}
		}
		.avatar {
			width: 134rpx;
			height: 134rpx;
      margin-right: 24rpx;
      // margin-top: 50rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			border: 4rpx solid #fff;
			background-color: rgba(255, 255, 255, 0.2);
		}
	}
	.coupon {
		margin-top: 56rpx;
		width: 100%;
		display: flex;
		align-items: center;
		font-weight: 600;
		color: #ffffff;
		font-size: 30rpx;
		font-family: PingFangSC-regular;
	}
	.kefu-box {
		width: 100%;
		margin-top: 70rpx;
		.kefu {
			padding: 22rpx 30rpx;
			width: 100%;
			height: 130rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.call-kefu {
				width: 150rpx;
				height: 56rpx;
				border-radius: 200rpx;
				// background-color: #BE9D78;
				color: #fff;
				line-height: 56rpx;
				font-size: 24rpx;
				text-align: center;
			}
		}
	}
	.menu-box {
		width: 100%;
		margin-top: 30rpx;
		.menu {
			width: 100%;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			color: #252525;
			.item {
				width: 100%;
				height: 108rpx;
				border-bottom: 1rpx solid #F7F8FA;
				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
}
.vip-rights-box{
  width: 706rpx;
  margin: 20rpx auto 24rpx;
  .vip-rights-img{
    width: 706rpx;
    height: 136rpx;
  }
}
.card-title{
  font-weight: 500;
  font-size: 32rpx;
  color: #0C1D38;
  margin-left: 24rpx;
  margin-bottom: 24rpx;
}
.my-service-box{
  width: 700rpx;
  background: #FFF;
  padding: 24rpx 24rpx;
  border-radius: 16rpx;
  margin: 24rpx auto 0;
  .title{
    font-weight: 500;
    font-size: 32rpx;
    color: #0C1D38;
    margin-bottom: 24rpx;
  }
  .list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: -50rpx;
    .item{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 25%;
      margin-bottom: 54rpx;
      .contact-btn{
        display: flex;
        flex-direction: column;
      }
      image{
        width: 48rpx;
        height: 48rpx;
      }
      text{
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #333333;
        line-height: 40rpx;
      }
    }
  }
}
</style>

